:root {
  --bg:           #0f1117;
  --surface:      #1c1f2a;
  --border:       #2a2d3a;
  --border-input: #3a3d4a;
  --text:         #e0e0e0;
  --text-muted:   #888;
  --text-heading: #fff;
  --accent:       #4ade80;
  --accent-hover: #22c55e;
  --red:          #f87171;
  /* Sidonavigeringens bredd fran 541px och uppat. Lag tidigare hardkodad som
     120px/144px i app.css, settings.css och live.py var for sig - byt har. */
  --nav-width:    104px;
  --nav-gutter:   calc(var(--nav-width) + 24px);
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;

  /* Akarpaletten. Bor har och inte i map.css sedan topplistan borjade rita
     samma farg utan att ha nagon karta - fargen ar AKARENS identitet, inte
     kartans. Namnen behaller --map-prefixet: det ar sa mapColor() slar upp dem.

     **Framrakad, inte vald pa kansla, och avstamd mot kartans ljusa bakgrund** -
     se den langa motiveringen i map.css. Andra inte ett varde utan att rakna om
     alla 15 par. EN uppsattning, ingen mork variant: kartan ar alltid ljus, och
     tva uppsattningar hade betytt att samma akare bytte farg mellan kartan och
     topplistan. */
  --map-athlete-1:     #2389e2;  /* bla */
  --map-athlete-2:     #ac2f3b;  /* rod */
  --map-athlete-3:     #00a061;  /* gron */
  --map-athlete-4:     #d36c00;  /* orange */
  --map-athlete-5:     #bd5caf;  /* lila */
  --map-athlete-6:     #b5b100;  /* gul */
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:           #f5f5f7;
    --surface:      #ffffff;
    --border:       #e2e4ea;
    --border-input: #d0d0d8;
    --text:         #1a1a1a;
    --text-muted:   #666;
    --text-heading: #111;
    --accent:       #16a34a;
    --accent-hover: #15803d;
    --red:          #dc2626;
  }
}
* { box-sizing: border-box; }
/* Innehallskolumnen. Varje sida satter bara sin egen bredd som --col (mobil)
   och --col-desktop; sjalva centreringen och brytpunkten star har istallet
   for upprepad i varje sidas stilmall. En sida utan --col (kartan) far ingen
   begransning alls och fyller ytan. */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 24px 24px 32px;
  min-height: 100vh;
  margin: 0 auto;
  max-width: var(--col, none);
}
@media (max-width: 540px) {
  html { font-size: 112%; }
  body { padding: 20px 16px 20px; }
}
/* 1.3rem ar appens sidrubrik-storlek overallt (samma som .header-back h1/h2
   i komponentdelen nedan) - lag tidigare som en 1.3rem-override i var och en
   av de tio sidmallarna, med 1.6rem har som ingen sida faktiskt anvande. */
/* Explicit margin-top:0 - annars ger webblasarens standardstil h1 ~16px
   toppmarginal pa de sidor dar rubriken star for sig sjalv, men inte dar den
   ligger i en .header-back-rad, sa rubrikerna hamnade pa olika hojd. */
h1 { font-size: 1.3rem; font-weight: 600; margin: 0 0 4px; color: var(--text-heading); }
.btn-primary {
  width: 100%;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-md);
  padding: 11px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item:hover { color: var(--text); }
/* Liten siffra pa fliken dar man svarar pa inbjudningar. Position relativt
   sjalva flik-lanken, som darfor ar position:relative. */
.bottom-nav-item { position: relative; }
.nav-badge {
  position: absolute; top: 4px; left: 50%; margin-left: 4px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--red); color: #fff;
  font-size: 0.65rem; font-weight: 700; line-height: 16px; text-align: center;
}
.bottom-nav-item.active { color: var(--accent); }
body.has-bottom-nav { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
/* Ikonerna star ensamma i bottom-nav pa mobil (namnet finns i aria-label);
   pa dator ar det en riktig sidonavigering och da skrivs namnen ut. */
.bottom-nav-label { display: none; }
@media (min-width: 541px) {
  /* Sidokolumn: pricken flyttar in mot ikonen i stallet for att sitta mitt i. */
  .nav-badge { top: 6px; left: 50%; margin-left: 6px; }
  .bottom-nav { flex-direction: column; top: 0; bottom: 0; right: auto; width: var(--nav-width);
    border-top: none; border-right: 1px solid var(--border); align-items: stretch; justify-content: flex-start;
    gap: 4px; padding: 12px 8px; }
  /* Ikonen over etiketten i stallet for bredvid: kolumnen blir smal utan att
     namnen forsvinner, och den aktiva fliken kan ramas in som en egen ruta
     i stallet for att bara byta textfarg. */
  .bottom-nav-item { flex: none; flex-direction: column; justify-content: center; gap: 5px;
    padding: 10px 0; font-size: 0.7rem; border: 1px solid transparent; border-radius: var(--radius-lg); }
  .bottom-nav-item.active { color: var(--accent); border-color: var(--accent); }
  .bottom-nav-label { display: inline; }
  body { max-width: var(--col-desktop, var(--col, none)); }
  /* Kolumnen centreras i ytan BREDVID navigeringen, inte i hela fonstret, och
     lagger sig tatt efter den sa fort fonstret ar for smalt for att centrera
     - darav max(). --content-left aterandvands av sidor med egen andrakolumn
     (se .settings-tabs) sa de foljer med i centreringen. */
  /* Huvudsidorna - flikarna i navigeringen - delar EN kolumnbredd, satt har
     och inte i varje sidas stilmall. Att Planera, Delning och Profil hamnade
     pa olika bredder syntes direkt nar man bytte flik. En sida som inte kan
     ha en kolumn alls (kartan) sager --col-desktop: none med samma
     specificitet i sin egen stilmall. Formular inuti kolumnen far garna vara
     smalare an den (se .settings-view-body, .share-row) - det ar kolumnen som
     ska ligga still mellan flikarna, inte varje enskilt falt. */
  body.has-bottom-nav {
    --col-desktop: 860px;
    --content-left: max(var(--nav-gutter),
      calc(var(--nav-gutter) + (100vw - var(--nav-gutter) - var(--col-desktop, 720px)) / 2));
    padding-bottom: 32px;
    margin-left: var(--content-left);
    margin-right: auto;
  }
}

/* ── Delade UI-komponenter ───────────────────────────────────────────────
   Anvands av flera sidmallar och ligger darfor har istallet for duplicerade
   i varje sidas egen <style>. En sidmall som behover avvika lagger sin
   override efter den har blocket i sin egen style-tagg (senare regel med
   samma specificitet vinner). */

h2 { font-size: 1rem; color: var(--text-heading); margin: 0 0 8px; }
.meta { font-size: 0.8rem; color: var(--text-muted); }
p.hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }
/* Statusrader efter ett formularanrop (?error=/?success= i URL:en). */
p.form-error { color: var(--red); font-size: 0.85rem; }
p.form-success { color: var(--accent); font-size: 0.85rem; }
.btn-secondary {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 12px; font-size: 0.9rem; cursor: pointer;
  white-space: nowrap;
}

/* Kort: en egen yta runt en sammanhallen del av sidan, i stallet for text
   direkt mot bakgrunden. Det ar det som gor att en sida laser som gjord
   snarare an som ett dokument - samma grepp som formkurvans datorvy. Radien
   ar medvetet storre an knapparnas och falens (--radius-xl mot -md): kortet
   ar ytan de ligger PA och ska las som ett lager, inte som ytterligare en
   kontroll i raden. */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 20px; margin-bottom: 16px;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* Statusraden under en atgard: "Sparat", "Kunde inte spara", "2 akare
   startade". Fanns i fem varianter under olika namn (.course-row-status plus
   fyra id-regler pa /sharing och /settings) innan den flyttades hit.
   min-height halller raden pa plats sa innehallet inte hoppar nar texten
   dyker upp och forsvinner. */
.form-status { margin-top: 8px; min-height: 1em; font-size: 0.8rem; color: var(--text-muted); }
.form-status.error { color: var(--red); }
.form-status.success { color: var(--text-muted); }

/* Text som klickar som en lank men ar en knapp - anvands dar en atgard ser ut
   som text (byt namn pa en rad, "Skicka om"). Lag i followed.css, sidscopad,
   men behovs pa tva sidor. */
.btn-linklike {
  background: none; border: none; padding: 0; margin: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.btn-linklike:hover { color: var(--text-heading); }
.btn-linklike.accent { color: var(--accent); text-decoration: underline; }

/* Ja/nej-status i ett faltvarde: bekraftad e-post, ansluten tjanst. */
.status-ok { color: var(--accent); }
.status-bad { color: var(--red); }
.inline-form { display: inline; }
/* En lank som ser ut som en knapp. */
.btn-link { display: inline-block; text-decoration: none; text-align: center; }

/* En knapp som tar bort nagot. Lag i tre stilmallar, scopad till var sin sida,
   trots att den betyder samma sak overallt. */
.danger-text { color: var(--red); border-color: var(--red); }

/* Rubrikrad hogst upp pa en undersida: tillbaka-header till vanster och en
   eventuell atgard (t.ex. "Lagg till" pa /courses) till hoger. Delad av
   /courses och /races - lag tidigare bara i courses.css. */
.page-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

/* Header pa vyer man kan backa fran: pil + rubrik ar EN klickbar yta.
   div role="button" i markupen (inte <button>) - en rubrik ar flow content
   och far inte ligga inuti en <button>, men ska behalla sin
   rubrik-semantik. */
.header-back {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  margin-left: -6px; background: none; border: none; padding: 0;
  color: inherit; text-decoration: none; text-align: left; cursor: pointer;
}
.header-back-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--text-muted);
}
.header-back:hover .header-back-icon { background: var(--surface); color: var(--text); }
.header-back h1, .header-back h2 {
  margin: 0; font-size: 1.3rem; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Helskarmsvy pa mobil, centrerad dialog fran 541px. Fast positionering
   (inte width/height:100% i en grid-cell) - procentuell hojd genom en
   icke-stretchad grid-cell ar opalitlig i WebKit, vilket gjorde att
   innehallet vaxte forbi skarmen istallet for att .panel-body fick en
   andlig hojd att scrolla inom. */
.panel-overlay {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.15s; box-sizing: border-box;
}
.panel-overlay.open { opacity: 1; pointer-events: auto; }
.full-modal {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg); border: none; border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity 0.15s;
}
.full-modal.open { opacity: 1; }
@media (min-width: 541px) {
  .panel-overlay { padding: 20px; }
  .full-modal {
    position: relative; inset: auto; width: min(520px, 100%); max-height: min(640px, 85vh);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: 0 25px 70px rgba(0,0,0,0.42); transform: scale(0.96);
  }
  .full-modal.open { transform: scale(1); }
}
.panel-header { display: flex; align-items: center; gap: 8px; padding: 16px; border-bottom: 1px solid var(--border); flex: none; }
.panel-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; }

/* Sok/sortera/filter-verktygsrad med popover-paneler. */
.toolbar-btn { position: relative; flex: none; }
.toolbar-btn.active > button { border-color: var(--accent); color: var(--accent); }
.popover {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 280px;
  background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--radius-md);
  padding: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.popover label { display: block; font-size: 0.8rem; color: var(--text-muted); margin: 10px 0 4px; }
.popover label:first-child { margin-top: 0; }
/* Synligt "-" mellan min/max istallet for tva fristaende falt pa rad. */
.popover .range-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.popover .range-row span { color: var(--text-muted); }
.popover input, .popover select {
  padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-input);
  background: var(--bg); color: var(--text); box-sizing: border-box; font-size: 0.85rem; width: 100%;
}
.popover .btn-secondary { width: 100%; margin-top: 12px; }
/* Riktiga <button aria-pressed> istallet for kryssrutor - samma visuella
   sprak for alla flerval (Typ/Manad/Favorit). */
.pill-group { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.pill-btn {
  border: 1px solid var(--border-input); border-radius: var(--radius-sm); padding: 5px 10px;
  background: transparent; color: var(--text); font-size: 0.8rem; cursor: pointer;
}
.pill-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--bg); }

/* hidden-attributet slar ut allt annat. Utan det har vinner en egen
   display-regel (t.ex. .map-fab { display: flex }) over webblasarens
   [hidden] { display: none }, och elementet syns trots att koden sagt at det
   att forsvinna - upptackt pa nyhetsknappen 2026-08-21. */
[hidden] { display: none !important; }

/* ── Akarraden ────────────────────────────────────────────────────────────────
 Delad av infopanelen pa kartan och av topplistan: samma akare ska se likadan
 ut pa bada stallen. Rader atskilda av en linje i stallet for var sitt kort -
 sex kort inuti en yta som redan ar ett kort blir ett lager for mycket, och
 linjerna later blicken ga rakt ner genom samma kolumn hos alla akare. */
.athlete-row { padding: 10px 0; }
.athlete-row + .athlete-row { border-top: 1px solid var(--border); }
/* Samma grasgörning som den inaktuella akar-markoren pa kartan (se isStale()) -
   varden andras inte, bara den visuella tydligheten i att de inte ar aktuella. */
.athlete-row.stale { opacity: 0.55; }
.athlete-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
/* Samma farg som akarens spar, markor och foljknapp - raden gar att koppla ihop
   med ratt spar pa kartan utan att lasa nagot namn. Fargen ar aldrig ensam
   barare: namnet star bredvid. */
.athlete-chip { flex: none; width: 10px; height: 10px; border-radius: 50%;
  align-self: center; }
.athlete-name { font-size: 0.9rem; font-weight: 600; color: var(--text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.athlete-goal { margin-left: auto; font-size: 0.75rem; color: var(--text-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.athlete-goal:empty { display: none; }
/* Fasta fem kolumner, aldrig auto-fit: med auto-fit bar pulsen over till en
   egen rad sa fort bredden inte rackte till fem spar, och de fem varden hor
   ihop som en avlasning. minmax(0, ...) later dem krympa i stallet.
   Tidskolumnen far mer plats - "00:47:32" ar det bredaste innehallet. */
.athlete-cells { display: grid; grid-template-columns: 1fr 1fr 1.25fr 1fr 0.85fr;
  gap: 6px 6px; }
.athlete-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cell-label { font-size: 0.68rem; color: var(--text-muted); }
.cell-value { display: flex; align-items: baseline; gap: 3px; min-width: 0; }
/* tabular-nums: siffrorna skrivs om varje sekund (se tickPanel), och utan fast
   siffbredd rycker hela raden i sidled nar en etta byts mot en atta. */
.cell-number { font-size: 0.95rem; font-weight: 600; color: var(--text-heading);
  font-variant-numeric: tabular-nums; }
.cell-unit { font-size: 0.68rem; color: var(--text-muted); }
/* Smala telefoner: strama at typografin i stallet for att lata nagot brytas ner
   pa en egen rad. Grasen ar satt sa att 320px - panelens sidpadding fortfarande
   rymmer alla fem. */
@media (max-width: 380px) {
  .athlete-cells { gap: 6px 4px; }
  .cell-number { font-size: 0.85rem; }
  .cell-label, .cell-unit { font-size: 0.62rem; }
}

/* Placeringssiffran: bara topplistan har en. Kartans panel staller akarna i
   palettordning, och en siffra dar hade sett ut som en placering utan att vara det. */
.athlete-place { flex: none; min-width: 1.4em; font-size: 0.9rem; font-weight: 700;
  color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }